<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Six Millions Blog</title>
    <meta name="description" content="百万的博客">
    <meta name="keywords" content="知识积累沉淀；常用框架；踩坑记录；学习笔记">
    <!--vue-->
    <script src="/js/vue@2.6.14.js"></script>
    <!--element-ui-->
    <link rel="stylesheet" href="/css/element-ui@2.15.6.css">
    <script src="/js/element-ui@2.15.6.js"></script>
    <!--api请求-->
    <script src="/js/axios@0.24.0.js"></script>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>Blog</el-header>
        <el-main id="mainBody">
            <el-tabs tab-position="left" @tab-click="getDoc">
                <el-tab-pane v-for="doc in docList" :key="doc.id" :label="doc.title">
                    <div v-html="docDetail.bodyHtml"></div>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                docList: [],
                docDetail: {}
            }
        },
        mounted: function () {
            var temp = window.location.href.split('?')[1];
            var pram = new URLSearchParams('?' + temp);
            var namespace = pram.get("namespace");
            var that = this;
            // get
            axios.get('/api/doc/list?namespace=' + namespace)
                .then(function (res) {
                    var data = res.data;
                    that.docList = data;
                })
                .catch(function (error) {
                    console.log('请求失败处理' + error);
                });
        },
        methods: {
            getDoc: function () {
                var that = this;
                // get
                axios.get('/api/doc',
                    {
                        params: {
                            namespace: "sixmillions/sb",
                            slug: "helloword"
                        }
                    })
                    .then(function (res) {
                        var data = res.data;
                        console.log(data);
                        that.docDetail = data;
                    })
                    .catch(function (error) {
                        console.log('请求失败处理' + error);
                    });
            }
        }
    })


</script>
<style>
    html,
    body {
        padding: 0;
        margin: 0
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

</style>

</html>